<template>
  <div>
    <div>
      这是热映页面 - <button @click="goToCinema">跳转到影院页面</button>
    </div>
    <p>
      <router-link to="/hot/hot1">热映1</router-link> |
      <router-link to="/hot/hot2">热映2</router-link> |
    </p>

    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    goToCinema() {
      //todo 编程式导航的跳转
      //todo 大多数情况下，router-link和编程式导航可以换着用
      //todo router-link更适合做导航，自带高亮效果
      //todo 编程式导航可以写逻辑判断
      //todo this.$router表示整一个路由实例, 一般只用于做跳转
      //todo this.$route表示当前路由的路由信息, 一般用于拿url的信息
      // this.$router.push("/cinema");
      this.$router.push({ name: "cinema" });
      // this.$router.replace("/cinema");
      // this.$router.go(-1);
      //todo push方法是往历史记录栈中追加，可以后退的
      //todo replace方法是替换当前的记录，不可以后退了
    },
  },
};
</script>

<style scoped>
.router-link-active {
  color: blue;
}
</style>
